<script>
import dayjs from "dayjs";

export default {
  name: "dayTab",
  data() {
    return {
      dayList: []
    }
  },
  computed: {
    targetViewId() {
      return 'scroll' + this.activeDay.day
    }
  },
  props: {
    currentDate: {
      type: String,
      default: dayjs().format('YYYY-MM-DD')
    },
    activeDay: {
      type: Object,
      default: () => {
      }
    }
  },
  methods: {
    changeDay(item) {
      this.$emit('change', item)
    },
    setDayList() {
      // 根据当前月计算出一共多少天以及星期 { week: '一', day: 1 }
      const dayList = []
      let date = new Date(this.currentDate)
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = new Date(year, month, 0).getDate()
      for (let i = 1; i <= day; i++) {
        let _id = i
        if (i < 10) {
          _id = '0' + i
        }
        const week = new Date(`${year}-${month}-${_id}`).getDay()
        dayList.push({
          week: ['日', '一', '二', '三', '四', '五', '六'][week],
          day: i,
          value: _id
        })
      }
      this.dayList = dayList

    }

  },
  watch: {
    currentDate: {
      handler() {
        console.log(this.activeDay)
        this.setDayList()
      },
      immediate: true
    }
  }
}
</script>

<template>
  <scroll-view :scroll-x="true" :scroll-with-animation="true" :scroll-into-view="targetViewId">
    <view class="custom-tabs" ref="dayTab">
      <view
          :id="'scroll' + item.day"
          :class="['day-tab',activeDay.day === item.day ? 'active' : '']" v-for="item in dayList"
          @click="changeDay(item)">
        <view class="week">{{ item.week }}</view>
        <view class="day">{{ item.day }}</view>
      </view>
    </view>
  </scroll-view>

</template>

<style lang="scss">
.custom-tabs {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  .day-tab {
    cursor: pointer;
    flex-shrink: 0;
    width: 83rpx;
    height: 85rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(10,10,10,0.16);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 17rpx;
    .week {
      width: 25rpx;
      height: 25rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 25rpx;
      color: #B4B4B4;
      text-align: center;
    }
    .day {
      width: 28rpx;
      height: 25rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 25rpx;
      color: #000000;
      text-align: center;
      margin-top: 10rpx;
    }
    &.active {
      background: #249CFF;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(10,10,10,0.16);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      .week,
      .day {
        color: #ffffff;
      }
    }
  }
}
</style>
